{% extends '../base.html' %}
{% block content %}
<div class="container-lg d-flex justify-content-center align-items-center">
    <div class="card" id="card-login">
        <form id="form-login" method="post" onsubmit="javascript:submit_login_form('form-login'); return false;">
            {% csrf_token %}
            <div id="form-header-login" class="text-center">
                <ion-icon id="form-header-icon-form-login" name="lock-closed-outline" class="form-icon mt-5"></ion-icon>
                <h2 id="form-title-login">{{ _('Login') }}</h2>
            </div>
            <div class="text-center mb-4">
                <p class="mt-3">{{ _('Welcome to Warehauser') }}</p>
            </div>
            <div class="text-center mb-4">
                <span class="error invisible"><strong class="error">{{ _('Oops!') }}</strong> {{ _('Your details were not recognised.') }}</span>
            </div>
            <div class="row justify-content-center">
                {{ form.as_div }}
                <!-- <div class="row form-row mb-3">
                    <div class="input-box">
                        <input type="text" id="username" name="username" placeholder="" autocapitalize="none" autofocus="true" autocomplete="off" required="true"/>
                        <span>Username</span>
                        <div class="required" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Required"></div>
                    </div>
                </div>
                <div class="row form-row mb-4">
                    <div class="input-box">
                        <input type="password" id="password" name="password" placeholder="" autocomplete="off" required="true"/>
                        <span>Password</span>
                        <div class="input-text-button"><ion-icon name="eye-outline" id="password-toggle" onclick="show_hide(this, 'password', 4);"></ion-icon></div>
                        <div class="required" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Required"></div>
                    </div>
                </div> -->
                <div class="row form-row mb-4">
                    <div class="button-row">
                        <button id="submit" type="submit" value="login" class="btn btn-primary col-12" disabled="true">{{ _('Login') }}</button>
                    </div>
                </div>
            </div>
        </form>
        <div class="row form-row center mb-5">
            <a id="link-forgot" href="#">{{ _('Forgot your password?') }}</a>
        </div>
    </div>
</div>
{% endblock %}